<template>
  <div class="main-bg">
    <!-- <header class="main-header">
      <div class="logo-title">校园综合平台</div>
    </header> -->
    <main class="main-content">
      <template v-if="$route.path === '/main'">
        <section class="announcement-section">
          <h2>校园公告</h2>
          <ul class="announcement-list">
            <li v-for="item in announcements" :key="item.id">
              <span class="dot"></span>{{ item.title }}
            </li>
          </ul>
          <button class="primary-btn" @click="goToAnnouncements">查看更多公告</button>
        </section>
        <section class="feature-grid">
          <div
            v-for="route in routes"
            :key="route.name"
            class="feature-card"
            @click="goFeature(route)"
          >
            <div class="feature-icon-bg">
              <img :src="route.meta.icon" :alt="route.meta.title" width="56" height="56" />
            </div>
            <div class="feature-title">{{ route.meta.title }}</div>
            <div class="feature-desc">{{ route.meta.description }}</div>
          </div>
        </section>
      </template>
      <router-view v-else></router-view>
    </main>
  </div>
</template>

<script>
import secondhandIcon from '@/assets/icons/secondhand.svg';
import forumIcon from '@/assets/icons/forum.svg';
import lunchdrawIcon from '@/assets/icons/lunchdraw.svg';
import aiqaIcon from '@/assets/icons/aiqa.svg';
import friendsIcon from '@/assets/icons/friends.svg';
import profileIcon from '@/assets/icons/profile.svg';

export default {
  name: 'Main',
  data() {
    return {
      routes: [
        {
          name: 'SecondHand',
          path: 'second-hand',
          meta: {
            title: '二手平台',
            description: '方便快捷的二手交易平台',
            icon: secondhandIcon,
          },
        },
        {
          name: 'Forum',
          path: 'forum',
          meta: {
            title: '论坛',
            description: '与同学交流分享',
            icon: forumIcon,
          },
        },
        {
          name: 'LunchDraw',
          path: 'lunch-draw',
          meta: {
            title: '午餐抽签',
            description: '随机分配午餐',
            icon: lunchdrawIcon,
          },
        },
        {
          name: 'AIQA',
          path: 'ai-qa',
          meta: {
            title: 'AI问答',
            description: '智能问答系统',
            icon: aiqaIcon,
          },
        },
        {
          name: 'Friends',
          path: 'friends',
          meta: {
            title: '好友',
            description: '好友互动平台',
            icon: friendsIcon,
          },
        },
        {
          name: 'Profile',
          path: 'profile',
          meta: {
            title: '个人中心',
            description: '个人信息管理',
            icon: profileIcon,
          },
        },
      ],
      announcements: [
        { id: 1, title: '欢迎新同学加入校园综合平台！' },
        { id: 2, title: '2024年春季学期课程表已发布' },
        { id: 3, title: '五一放假通知' },
      ],
    };
  },
  computed: {
    isLoggedIn() {
      return localStorage.getItem('token') !== null;
    },
  },
  methods: {
    logout() {
      if (confirm('您确定要退出登录吗？')) {
        localStorage.removeItem('token');
        this.$router.push('/login');
      }
    },
    goFeature(route) {
      this.$router.push(`/main/${route.path}`);
    },
    goToAnnouncements() {
      this.$router.push('/main/announcements');
    },
  },
  created() {
    if (!this.isLoggedIn) {
      this.$router.push('/login');
    }
  },
};
</script>

<style scoped>
.main-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
}
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 48px 0 48px;
  z-index: 1;
  position: relative;
}
.logo-title {
  font-size: 2.2em;
  font-weight: bold;
  color: #2563eb;
  letter-spacing: 2px;
}
.main-content {
  max-width: 1100px;
  margin: 40px auto 0 auto;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.announcement-section {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(37,99,235,0.06);
  padding: 32px 32px 24px 32px;
  min-width: 320px;
  max-width: 350px;
  flex: 1 1 320px;
  margin-bottom: 24px;
}
.announcement-section h2 {
  font-size: 1.3em;
  color: #2563eb;
  margin-bottom: 18px;
}
.announcement-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}
.announcement-list li {
  font-size: 1em;
  color: #333;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.announcement-list .dot {
  width: 8px;
  height: 8px;
  background: #2563eb;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}
.primary-btn {
  /* 移除color和text-decoration，确保继承全局按钮样式 */
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px;
  flex: 2 1 420px;
}
.feature-card {
  background: linear-gradient(120deg, #f1f5ff 60%, #e0e7ff 100%);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(37,99,235,0.06);
  padding: 32px 20px 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.feature-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 24px rgba(37,99,235,0.13);
}
.feature-icon-bg {
  width: 56px;
  height: 56px;
  background: #2563eb22;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.feature-icon-bg i {
  font-size: 2.2em;
  color: #2563eb;
}
.feature-title {
  font-size: 1.15em;
  font-weight: bold;
  color: #2563eb;
  margin-bottom: 8px;
}
.feature-desc {
  font-size: 0.98em;
  color: #555;
}
@media (max-width: 900px) {
  .main-content {
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  .announcement-section {
    max-width: 100%;
    min-width: 0;
  }
}
</style>